<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5. 根据数据arr生成以下表单效果
    </title>
</head>
<body>
    <div class="bigbox">
        <!-- 用户名：<input type="text" ><br/>
        密码: <input type="text"> <br/>
        性别: <input type="text"> <br/>
        爱好: <input type="text"> <br/>
        是否已婚: <input type="text"> <br/>
        简介:<textarea name="简介" id="" cols="30" rows="10"></textarea> -->
        <h2></h2>

    </div>
    <script>
        var arr = [{
            label: "用p名",
            name: "username",
            type: "text"
        }, {
            label: "密码",
            name: "password",
            type: "password"
        }, {
            label: "性别",
            name: "gender",
            type: "select",
            options: ['男', '女', '不男', '不女', 'Gay', '妖王']
        }, {
            label: "爱好",
            name: "hobby",
            type: "checkbox",
            options: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']
        }, {
            label: '是否已婚',
            name: 'married',
            type: 'radio',
            options: ['已婚', '未婚']
        },
        {
            label: '简介',
            name: 'resume',
            type: 'textarea'
        }];

        const bigbox = document.createElement('.bigbox')
        bigbox.innerHTML = arr.map(item=>{
            return `
            <h2> ${item.name}</h2>
            
            // :<input type="text" ><br/>
            // 密码: <input type="text"> <br/>
            // 性别: <input type="text"> <br/>
            // 爱好: <input type="text"> <br/>
            // 是否已婚: <input type="text"> <br/>
            // 简介:<textarea name="简介" id="" cols="30" rows="10"></textarea>
            `
        }).join('')

   
   
   
   </script>
    

    
</body>
</html>